<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.m-logoInfo-btn{ margin-top: 24px; }
	.logTable{ margin-top: 20px; }
	.logTable th, .logTable td{ text-align: center; }
	#logPage{ text-align: right; }
</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>更新日志信息</h4>
	<div class="m-panel-body">
		<div class="col-md-3">
			<label>服务器名称</label>
			<select class="form-control nameServer">
				<option value="">请选择</option>
			</select>
		</div>
		<div class="col-md-3">
			<label>域名</label>
			<select class="form-control domainName">
				<option value="">请选择</option>
			</select>
		</div>
		<div class="col-md-3">
			<label>搜索关键字</label>
			<input type="text" name="" class="form-control searchKey" placeholder="搜索关键字">
		</div>
		<div class="col-md-3">
			<button class="btn btn-md btn-primary m-logoInfo-btn">
				<i class="glyphicon glyphicon-search"></i>
			</button>
		</div>

		<div class="col-md-12">
			<table class="table table-bordered table-impresive logTable">
				<thead>
					<tr>
						<th>操作人</th>
						<th>域名</th>
						<th>日志内容</th>
						<th>日志类型</th>
						<th>服务器名称</th>
						<th>时间戳</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			<div id="logPage"></div>
		</div>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">
	var firstLoad = true;

	var paramServer = '';
	var paramKey = '';
	var paramDomain = '';

	$('.nameServer').change(function(){
		paramServer = $(this).val();
		firstLoad = true;
		loadLogPage(1, paramKey, paramServer, paramDomain);
	})

	$('.domainName').change(function(){
		paramDomain = $(this).val();
		firstLoad = true;
		loadLogPage(1, paramKey, paramServer, paramDomain);
	})

	$('.searchKey').change(function(){
		paramKey = $(this).val();
	})

	$('.m-logoInfo-btn').click(function(){
		firstLoad = true;
		loadLogPage(1, paramKey, paramServer, paramDomain);
	})

	function loadLogPage (page, search, nameServer, domain){
		ajaxObj('/log/getLogPage', 'post', {page, pageSize: 10, search, nameServer, domain}, function(obj){
			var str = '';
			$('.logTable tbody').html('');
			if(obj.num){
				obj.logInfo.map(function(data){
					var time = getLocalTime(data.timestamp);
					var name = data.server_name ? data.server_name : '默认';
					str += `
						<tr>
							<td>${data.username}</td>
							<td>${data.domain_name}</td>
							<td>${data.log_contents}</td>
							<td>${data.log_type}</td>
							<td>${name}</td>
							<td>${time}</td>
						</tr>`
				})

				if(firstLoad){
					firstLoad = false;
					layui.use(['laypage', 'layer'], function(){
					  var laypage = layui.laypage
					  ,layer = layui.layer;
					  
					  //总页数低于页码总数
					  laypage.render({
					    elem: 'logPage'
					    ,limit: 10
					    ,count: obj.num //数据总数	
					    ,theme: '#20A0FF'
					    ,jump: function(curr, first){
					    	!first && loadLogPage(curr.curr, search, nameServer, domain)
					    }
					  });
					})
				}

			}else{
				$('#logPage').html('');
				str += '<tr><td  colspan="6">暂无日志信息</td></tr>';
			}
			$('.logTable tbody').append(str);
		})
	}

	loadLogPage(1);
	
	(function (){
		ajaxObj('/log/getNSselect', 'get', '', function(obj){
			var str = '';
			obj.map(function(data){
				str += `<option value="${data.id}">${data.server_name}</option>`
			})
			$('.nameServer').append(str);
		})

		ajaxObj('/log/getDomainSelect', 'get', '', function(obj){
			var str = '';
			obj.map(function(data){
				str += `<option value="${data.id}">${data.domain_name}</option>`
			})
			$('.domainName').append(str);
		})
	})()

</script>
<{/block}>